<template>
    <div class="home">
        <!-- 面试题: 页面出现先弹框时,弹框后看见了底层页面的内容,如何解决-->
        <transition name="van-fade">
            <!-- 1.给首页内容的盒子添加一个v-show指令判断条件时 首页的路由是否匹配当前地址栏的路由v-show($route.path === "/home")
            2.避免出现主页内容迅速消失的问题,给主页内容盒子添加过渡动画 -->
            <div v-if="$route.path === '/home'">
                <!-- 主页搜索栏 -->
                <van-search
                    shape="round"
                    placeholder="请输入搜索关键词"
                    disabled
                    @click="searchClick"
                />
                <!-- banner图组件 -->
                <van-swipe
                    class="my-swipe"
                    :autoplay="3000"
                    indicator-color="#1989fa"
                >
                    <van-swipe-item v-for="item in banner" :key="item.id">
                        <img :src="item.image_url" alt="" width="100%" />
                    </van-swipe-item>
                </van-swipe>

                <!-- []宫格栏 -->
                <Grid :channel="channel" />
                <!-- []精选专题 -->
                <Topic :topicList="topicList" />

                <div>
                    <p>123</p>
                    <p>123</p>
                    <p>123</p>
                    <p>123</p>
                    <p>123</p>
                    <p>123</p>
                    <p>123</p>
                    <p>123</p>
                    <p>123</p>
                    <p>123</p>
                    <p>123</p>
                    <p>123</p>
                </div>
            </div>
        </transition>

        <!-- 黑色遮罩 -->
        <transition name="van-fade">
            <div class="pop-shadow" v-show="isShowShadow"></div>
        </transition>
        <!-- 暂时搜索弹出窗 -->
        <transition name="van-slide-right">
            <router-view></router-view>
        </transition>
    </div>
</template>

<script>
//引入首页api
import { getHomeDataAPI } from "../requset/api";
import { mapState, mapMutations } from "vuex";
//引入组件
import Grid from "../components/home/Grid.vue";
import Topic from "../components/home/Topic.vue";
export default {
    name: "Home",
    components: {
        Grid,
        Topic,
    },
    data() {
        return {
            banner: [],
            channel: [],
            topicList: [],
        };
    },
    created() {
        getHomeDataAPI() //发送数据
            .then((res) => {
                console.log(res);
                let { banner, channel, topicList } = res.data; //结构对象的写法  let banner = res.data.banner
                this.banner = banner;
                this.channel = channel;
                this.topicList = topicList;
            })
            .catch((err) => {
                console.log(err);
            });
    },
    computed: {
        ...mapState({
            isShowShadow: (state) => state.showShadow.isShowShadow,
        }),
    },
    methods: {
        ...mapMutations({
            chanIsShowShadow: "showShadow/chanIsShowShadow",
        }),
        searchClick() {
            this.$router.push("/home/searchpopup");
            this.chanIsShowShadow(true);
        },
    },
    watch: {
        $route(to, from) {
            //不是路由守卫, 是路由监听 而且只能监听父子路由间的跳转!!!!!!!!!!!
            // console.log("from:",from);
            // console.log("to:",to);
            if (to.path === "/home") {
                this.chanIsShowShadow(false);
            }
        },
    },
};
</script>
<style lang="less" scoped>
//Vue 的过渡效果的写法
//注意 需要过渡的盒子的身上不要书写 需要用来实现过渡动画的属性 例如right用来实现过渡动画了在 searchpopup中就不需要写了
// .slide-enter,
// .slide-leave-to {
//     //出现的初始阶段
//     right: -100%;
// }
// .slide-enter-active,
// .slide-leave-active {
//     transition: all 0.5s;
// }
// .slide-enter-to,
// .slide-leave {
//     //出现的结束阶段
//     right: 0;
// }
.home {
    padding-bottom: 0.5rem;
}
.pop-shadow {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 1;
}
</style>
